@use '@angular/material' as mat;
@import '../mixins/base-color';
@import '../component/component';
$blue-color: (
  //
  50: #e7e9ff,
  100: #c2c8fe,
  200: #96a4fe,
  300: #6280ff,
  400: #2962ff,
  500: #0044fc,
  600: #003bf0,
  700: #002fe3,
  800: #0022d9,
  900: #0001c0,
  A100: #c2c8fe,
  A200: #96a4fe,
  A400: #2962ff,
  A700: #002fe3,
  contrast: (
    //
    50: rgba(black, 0.87),
    100: rgba(black, 0.87),
    200: rgba(black, 0.87),
    300: white,
    400: white,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: rgba(black, 0.87),
    A200: white,
    A400: white,
    A700: white
  )
);

// user material mat blue
$blue-primary: mat.m2-define-palette($blue-color, 400);
$blue-accent: mat.m2-define-palette($blue-color, A400);
$blue-warn: mat.m2-define-palette(mat.$m2-red-palette, A200, A100, A400);
$blue-theme: mat.m2-define-light-theme(
  (
    color: (
      primary: $blue-primary,
      accent: $blue-accent,
      warn: $blue-warn,
    ),
    typography: mat.m2-define-typography-config(),
    density: 0,
  )
);

.blue-theme {
  @include mat.all-component-themes($blue-theme);
  @include base-colors($blue-theme);
  @include component-theme($blue-theme);
}
